<template>
    <div >
      <a-modal
        v-model="dialogData.show"
        width="650px"
        @cancel="handleClose">
        <div slot="title">
          <span>新增记账</span>
        </div>
        <el-row style="padding: 30px 10px">
          <el-col :span="24">
             <el-form :model="parames" size="small" :rules="rules" label-position="left" ref="parames" label-width="94px" class="addForm">
                <el-row style="padding: 0 40px">
                      <el-col :span="24" style="margin-top:15px">
                        <el-form-item label="纳税类型:">
                          <el-select style="width:100%" v-model="parames.taxType" placeholder="请选择">
                            <el-option v-for="(item,index) in taxType" :key="index" :label="item.desc" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="增值税:">
                          <el-input size="small" v-model="parames.valueAddedTax" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="企业所得税:">
                          <el-input size="small" v-model="parames.corporateIncomeTax" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="个人所得税:">
                          <el-input size="small" v-model="parames.personalIncomeTax" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="其他税费:">
                          <el-input size="small" v-model="parames.otherTax" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="记账期:">
                            <el-date-picker
                            style="width:100%"
                            :disabled="true"
                            v-model="parames.bookKeepingMonth"
                            type="month"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                      </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
              <div v-if="dialogData.type == 'edit'">
                <el-button
                  @click="handleCancle"
                  size="small"
                  icon="el-icon-close"
                  style="width:200px;text-align: left;margin-bottom:10px"
                >取消编辑</el-button>
              </div>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-modal>
    </div>
</template>

<script>
export default {
    props: ['dialogData'],
    data() {
        return {
          customStyle: 'border-radius: 4px;margin-bottom: 8px;border: #f7f7f7 solid 1px;overflow: hidden',
          activeNames: ['1','2'],
          loadingBtn: false,
          parames: {
            id: '',
            contractProductId: '', //合同产品ID
            bookKeepingMonth: '', //记账期
            taxType: '', //纳税类型
            valueAddedTax: '', //增值税
            corporateIncomeTax: '', //企业所得税
            personalIncomeTax: '', //个人所得税
            otherTax: '', //其他税费
          },
          tableKeys: [0,1,2,3],
          hetongData: {
            title: '',
            slectData: [],
            show: false
          },
          taxType: [],
          rules: {
            receiptAccountId: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            receiptDate: [{ required: true, message: '必填', trigger: ['blur' ]}],
          }
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      setData () {},
      handleSave () { //保存
        this.$refs['parames'].validate((valid) => {
          this.setData()
          if (valid) {
            this.loadingBtn = true
            if (this.dialogData.type == 'edit') { //修改保存成功
              this.$post(this.$api.posTaskBookkeepingEdit,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }
              })
            } else { //新增
              this.$post(this.$api.posTaskBookkeepingAdd,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '保存成功'})
                  this.$emit('checkRender')
                  this.handleClose()
                }
              })
            }
            setTimeout(() => {
              this.loadingBtn = false
            }, 300);
          }
        })
      },
      render () { //获取详情信息
        this.loading = true
        this.$post(this.$api.posFinanceReceiptFind,{
          receiptRecordId: this.dialogData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.bookKeepingMonth = data.bookKeepingMonth
            this.parames.taxType = data.taxType
            this.parames.paymentAccountName = data.paymentAccountName
            this.parames.valueAddedTax = data.valueAddedTax
            this.parames.corporateIncomeTax = data.corporateIncomeTax
            this.parames.personalIncomeTax = data.personalIncomeTax
            this.parames.otherTax = data.otherTax
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.parames.contractProductId = '' //合同产品id
        this.parames.bookKeepingMonth = ''
        this.parames.taxType = ''
        this.parames.valueAddedTax = '' 
        this.parames.corporateIncomeTax = '' 
        this.parames.personalIncomeTax = ''
        this.parames.otherTax = ''
        this.$refs.parames.resetFields()
      }
    },
    components: {
    },
    computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.parames.contractProductId = this.dialogData.id
            this.parames.bookKeepingMonth = this.dialogData.time
            this.$utils.getEnumberation('postCustomerTaxType','taxType',this) //财税类型
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
  left: 15px;
}
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header{
  background: #fafafa;
}
#addHet .ant-collapse > .ant-collapse-item{
  border-bottom: #f7f7f7 solid 1px!important;
}
</style>
